<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            
        }
        body{
            width: 100vw;
            height:100vh;
            
            margin:6vw 10vw;
            background-image: url(a.jpg);
            animation: rotate 2s infinite linear;
        }
        @keyframes rotate {
  from {
    transform: rotate(0deg); /* 开始时不旋转 */
  }
  to {
    transform: rotate(360deg); /* 结束时旋转360度 */
  }}
       #t0{
        width:20vw;
            height: 20vw;
            border-radius: 10vw;
            border: 1px transparent;
    
            background-image: linear-gradient(to right,black 50%,white 50%);
       }
       #t3{
        width: 10vw;
            height: 10vw;
            border-radius: 5vw;
            border: 1px solid black;
            background-color: black ;
            margin: 0 0 0 5vw
       }
       #t4{
        width: 9.5vw;
            height: 9.5vw;
            border-radius: 50%;
            border: 1px solid white;
            background-color: white;
            margin: 0vw 0 0 5vw;
       }
       #t1{
        width: 30%;
            height: 30%;
            border-radius: 50%;
            border: 1px solid white;
            background-color: white;
            margin:3vw 0 0 4vw
       }
       #t2{
        width: 30%;
            height: 30%;
            border-radius: 50%;
            border: 1px transparent;
            background-color: black;
            margin:3vw 0 0 4vw
       }
            
            
        
        
    </style>
</head>
<body>
    <div id="t0">
        <div id="t3">
            <div id="t1"></div>
        </div>
        <div id="t4">
            <div id="t2"></div>
        </div>
    </div>
</body>
</html>